Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var webroot = Ext.get("webroot").getValue();
    var imageroot = Ext.get("imageroot").getValue();
    var imagecoverroot = Ext.get("imagecoverroot").getValue();
    var videoroot = Ext.get("videoroot").getValue();
    var power = Ext.decode(Ext.get("power").getValue());

    var tree0 = new sh.mytool.cv.module.ColumnPanel({
        power: power,
        rootId : 1,
        rootUrl : webroot + "/column/root.do",
        loaderUrl : webroot + "/column/list.do",
        getUrl : webroot + "/column/get.do",
        editUrl : webroot + "/column/edit.do",
        removeUrl : webroot + "/column/remove.do",
        moveUrl: webroot + "/column/move.do",
        listeners : {
            click : function(node, e) {
                if(!node.isLeaf()){
                    return;
                }
                var articleId = node.attributes.article.id;
                var articlePanelTitle = node.attributes.text;
                openArticleTab(articleId, articlePanelTitle);
            }
            // no effect
//            expand: function(tree){
//                alert(tree.getRootNode().indexOf(0));
//                // fireEvent("click");
//            }
        }
    });
    
    function openArticleTab(articleId, articlePanelTitle){
        var articlePanelId = "article" + articleId;
        var main = Ext.getCmp("main");
        var panel = Ext.get(articlePanelId);
        if (!panel) {
            panel = new sh.mytool.cv.module.ArticlePanel({
                id : articlePanelId,
                title : articlePanelTitle,
                closable : true,
                power : power,
                editUrl : webroot + "/article/edit.do",
                getUrl : webroot + "/article/get.do?id=" + articleId
                // T remove
            });
            main.add(panel);
        }
        main.doLayout();
        // ? main.activate(panel);
        main.activate(articlePanelId);
    }

    var tree1 = new Ext.tree.TreePanel({
        enableDD : false,
        containerScroll : true,
        border : false,
        loader : new Ext.tree.TreeLoader(),
        root : new Ext.tree.AsyncTreeNode({
            text : "Gallery",
            expanded : true,
            children : [ {
                id : "video",
                text : 'Video',
                leaf : true
            }, {
                id : "imagegallery",
                text : 'Image',
                leaf : true
            } ]
        }),
        listeners : {
            click : function(node, e) {
                var id = node.attributes.id;
                var text = node.attributes.text;
                var panel = Ext.get(id);
                var main = Ext.getCmp("main");
                if (!panel) {
                    switch (id) {
                        case "video":
                            panel = new sh.mytool.cv.module.VideoPanel({
                                id : id,
                                title : text,
                                autoScroll : true,
                                closable : true,
                                power: power,
                                queryUrl : webroot + "/video/page.do",
                                editUrl : webroot + "/video/edit.do",
                                getUrl : webroot + "/video/get.do",
                                removeUrl : webroot + "/video/remove.do",
                                pageSize : 12,
                                imageRoot : webroot + imageroot,
                                videoRoot : webroot + videoroot
                            });
                            break;
                        case "imagegallery":
                            panel = new sh.mytool.cv.module.ImageGalleryPanel({
                                id : id,
                                title : text,
                                autoScroll : true,
                                closable : true,
                                power: power,
                                pageSize : 12,
                                queryGalleryUrl: webroot + "/imagegallery/page.do",
                                queryImageUrl: webroot + "/image/page.do",
                                getGalleryUrl : webroot + "/imagegallery/get.do",
                                getImageUrl : webroot + "/image/get.do",
                                editGalleryUrl : webroot + "/imagegallery/edit.do",
                                editImageUrl : webroot + "/image/edit.do",
                                removeGalleryUrl: webroot + "/imagegallery/remove.do",
                                removeImageUrl: webroot + "/image/remove.do",
                                imageRoot: webroot + imageroot,
                                imageCoverRoot: webroot + imagecoverroot
                            });
                            break;
                    }
                    main.add(panel);
                }
                main.doLayout();
                main.activate(id);
            }
        }
    });

    var button = new sh.extjs.module.LoginButton({
        text: power.hidden ? "Login": "Logout",
        loginUrl: webroot + "/user/login.do",
        logoutUrl: webroot + "/user/logout.do"
    });

    new Ext.Viewport({
        layout : "border",
        items : [ {
            region : "north",
            id : "top",
            border : false,
            height : 20,
            bbar : ["->", button]
        }, {
            region : "west",
            id : "menu",
            title : "Menu",
            width : 200,
            margins : '0, 5, 0, 5',
            collapsible : true,
            // collapseMode: 'mini',
            items : [ tree0, tree1 ]
        }, {
            region : "center",
            id : "main",
            xtype : "tabpanel",
            enableTabScroll : true,
            tabPosition : "top",
            layoutOnTabChange: true,
            closable : true
        } ]
    });

    openArticleTab(26, "General Intro");
});